<template>
    <svg 
        :id="`${x}_${y}`"
        :x="rectX" 
        :y="rectY" 
        :width="width" 
        :height="height"
        @click="gridSelect($event)" 
        @mousedown="rectMousedown($event)"
        @mouseover="rectMouseover($event)"
        @mouseup="rectMouseup($event)">
        <slot></slot>
        <use v-if="isDrag && !isDisabled" href="#grid_movebar" @mousedown="moveBarMousedown($event)" style="cursor: move;"></use>
    </svg>
</template>

<script>
export default {
    name: 'VoGridSvg',
    props: {
        x: {
            type: Number,
            default: 0
        },
        y: {
            type: Number,
            default: 0
        },
        offsetX: {
            type: Number,
            default: 0
        },
        offsetY: {
            type: Number,
            default: 0
        },
        width: {
            type: Number,
            default: 0
        },
        height: {
            type: Number,
            default: 0
        },
        selectState: Boolean,
        //禁止选中的项
        disabled: {
            type: Array,
            default: () => []
        },
        //是否开启拖拽
        isDrag: Boolean
    },
    data() {
        return {
            movening: false,
            downEl: null,
            moveX: 0,
            moveY: 0,
        }
    },
    computed: {
        rectX() {
            return this.x * this.width + this.offsetX + this.moveX
        },
        rectY() {
            return this.y * this.height + this.offsetY + this.moveY
        },
        isDisabled() {
            return this.disabled.findIndex(e => e.x === this.x && e.y === this.y) !== -1
        }
    },
    methods: {
        gridSelect(el) {
            if(this.isDisabled) return;
            this.$emit('up-select', {x: this.x, y: this.y})
        },
        rectMouseover(el) {
            if(!this.selectState) return;
            this.$emit('up-over', {x: this.x, y: this.y})
        },
        rectMousedown(el) {
            if(this.isDisabled) return;
            this.$emit('up-down', {x: this.x, y: this.y, el})
        },
        rectMouseup(el) {
            if(this.isDrag) {
                this.resetMove()
            }
        },
        setMove({moveX, moveY}) {
            this.moveX = moveX || 0
            this.moveY = moveY || 0
        },
        resetMove() {
            this.movening = false;
            this.downEl = null;
            this.moveX = 0;
            this.moveY = 0;
            this.$emit('up-drag', {
                x: this.x, 
                y: this.y, 
                el: this.$el,
                movening: this.movening
            })
        },
        moveBarMousedown(el) {
            el.stopPropagation();
            if(this.isDisabled) return;

            if(this.isDrag) {
                if(this.movening) {
                    this.movening = false;
                    this.downEl = null;
                    this.moveX = 0;
                    this.moveY = 0;
                    return;
                }
                this.movening = true;
                this.downEl = this.$el;
                this.$el.parentNode.appendChild(this.$el)
                this.$emit('up-drag', {
                    x: this.x, 
                    y: this.y, 
                    el: this.$el,
                    movening: this.movening
                })
            }
        }
    },
}
</script>
